<script>
import { Steps, Step } from 'element-ui'
import { divisionUi } from '@/packages/utils/ui'
import { clone } from '@/utils/clone'
const ElStepsProps = Object.keys(Steps.props).filter(e => ['active'].indexOf(e) === -1)

export default {
    name: 'VoStepFrom',
    components: {
        Steps,
        Step
    },
    props: {
        steps: Array,
        schema: Object,
        rules: Object,
        options: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            active: 1,
            model: {},
            propertiesSteps: {},
            currentSchema: {}
        }
    },
    methods: {
        schemaInit() {
            if (this.schema) {
                this.getPropertiesSteps()
                this.currentSchema = {
                    ...clone(this.schema),
                    properties: []
                }
                this.stepChange()
            }
        },
        getPropertiesSteps() {
            const { propertiesSteps } = this
            const { properties } = this.schema
            if (!properties) return {};
            if (Array.isArray(properties)) {
                properties.forEach(propery => {
                    if (propery.tab) {
                        if (!propertiesSteps[propery.tab]) {
                            propertiesSteps[propery.tab] = []
                        }
                        propertiesSteps[propery.tab].push(propery)
                    } else {
                        if (!propertiesSteps._default) {
                            propertiesSteps._default = []
                        }
                        propertiesSteps._default.push(propery)
                    }
                })
            } else {
                for (const key in properties) {
                    const propery = properties[key]
                    if (propery.tab) {
                        if (!propertiesSteps[propery.tab]) {
                            propertiesSteps[propery.tab] = {}
                        }
                        propertiesSteps[propery.tab][key] = propery
                    } else {
                        if (!propertiesSteps._default) {
                            propertiesSteps._default = {}
                        }
                        propertiesSteps._default[key] = propery
                    }
                }
            }
        },
        stepChange() {
            const step = this.steps.find((e, i) => i + 1 === this.active)
            const properties = Array.isArray(this.schema.properties) ? [
                ...(step ? this.propertiesSteps[step.title] : []),
                ...this.propertiesSteps._default
            ] : {
                ...(step ? this.propertiesSteps[step.title] : {}),
                ...this.propertiesSteps._default
            }
            this.currentSchema.properties = properties
            this.$nextTick(() => {
                this.$refs.form.clearValidate()
            })
        },
        prev() {
            if (this.active > 1) {
                --this.active
                this.stepChange()
            }
        },
        next() {
            const len = this.steps.length
            if (this.active < len) {
                ++this.active
                this.stepChange()
            }
        },
        sfNext() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.next()
                }
            })
        },
        handleStep(index) {
            const len = this.steps.length;
            const i = index + 1;
            if (i <= len && i > 0 && this.active !== i) {
                this.active = i;
                this.stepChange()
            }
        },
        save() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                }
            })
        },
        sfChange(el) {
        }
    },
    computed: {
        prevDisabled() {
            return this.active <= 1
        },
        nextDisabled() {
            return this.active >= this.steps.length
        }
    },
    mounted() {
        this.schemaInit()
    },
    render(h) {
        const { props } = divisionUi(this.options, ElStepsProps)

        return (
            <div>
                <Steps active={ this.active } props={ props }>
                    {
                        this.steps.map((step, index) => {
                            return (
                                <Step props={ { status: step.status } } vOn:click_native={ () => { this.handleStep(index) } } key={ index } >
                                    {
                                        <template slot="icon">{
                                            typeof step.icon === 'function' ? step.icon(h, step) : <i class={step.icon}></i>
                                        }</template>
                                    }
                                    {
                                        <template slot="title">{
                                            typeof step.title === 'function' ? step.title(h, step) : step.title
                                        }</template>
                                    }
                                    {
                                        <template slot="description">{
                                            typeof step.description === 'function' ? step.description(h, step) : step.description
                                        }</template>
                                    }
                                </Step>
                            )
                        })
                    }
                </Steps>
                <div class="line"></div>
                <VoSchemaForm ref="form" props={{
                    model: this.model,
                    schema: this.currentSchema,
                    rules: this.rules
                }} vOn:change={ this.sfChange }>
                    <template slot="footer">
                        <div class="footer">
                            { this.prevDisabled ? null : <el-button vOn:click={ this.prev }>上一步</el-button> }
                            { this.nextDisabled ? null : <el-button vOn:click={ this.sfNext }>下一步</el-button> }
                            {
                                this.active === this.steps.length ? <el-button type="primary" vOn:click={ this.save }>保存</el-button> : null
                            }
                        </div>
                    </template>
                </VoSchemaForm>
            </div>
        )
    }
}
</script>

<style scoped>
.line{
    display: block;
    width: 100%;
    margin: 10px 0;
    overflow: hidden;
}
.footer{
    text-align: center;
}
</style>
